import React,{Component} from 'react';
import './search.scss';
import {
  Link
} from 'react-router-dom';
import { getKeywordsList } from 'api/search.js';
let page = 0;
export default class Search extends Component{
	constructor(props) {
    super(props)
    this.state = {
    	value: '1', //下拉列表的value值
    	content:'请输入商品关键词搜索',
    	val:'', //搜索框的值
    	likeList:[],
      src:'/search/searchProductbig',
      historyList:[]
    }
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange (event) { //下拉列表改变
    this.setState({
    	value: event.target.value,
    	content:event.target.value === '1' ? '请输入商品关键词搜索' : '请输入公司关键词搜索'
    },()=>{
    	this.getSrc()
    })
  }
  handleChangen = (e) => { //搜索框改变获取值
    this.setState({
      val: e.target.value
    },()=>{
    	this.getSrc()
    })
  }
  getSrc = () => { //路径切换
  	this.setState({
  		src:this.state.value === '1' ? '/search/searchProductbig' : '/search/searchCompany'
  	})
  }
  _getKeywordsList = (sum) => { //猜你喜欢接口
  	getKeywordsList({
  		limit:7,
      page: sum
  	}).then(res => {
  		if (res.code===1){
  			this.setState({
  				likeList:res.data.data
  			})
  		}
  	})
  }
  enterInto () { //回车进行搜索
    this.props.history.push({
      pathname: this.state.src,
      state:{
        val:this.state.val,
        value:this.state.value
      }
    })
    return false;
  }
  changeLike (sum) { //换一批猜你喜欢
    page = page+sum;
    this._getKeywordsList(page);
  }
  setHistoryItems (keyword) { //存值方法,新的值添加在首位
    let { historyItems } = localStorage;
    if (historyItems === undefined) {
      localStorage.historyItems = keyword;
    } else {
      historyItems = keyword + '|' + historyItems.split('|').filter(e => e != keyword).join('|');
      localStorage.historyItems = historyItems;
    }
    this.getHistory();
  }
  clearHistory () { //清除历史记录
    localStorage.removeItem('historyItems');
    this.setState({
      historyList:[]
    })
  }
  getHistory () { //获取历史记录
    var str=localStorage.historyItems;
    if(str!==undefined){
      if(str.split('|').length > 6){
        this.setState({
          historyList:str.split('|').slice(0,6)
        })
      } else {
        this.setState({
          historyList:str.split('|')
        })
      }
    }
  }
  componentDidMount () {
    this._getKeywordsList(1);
    this.getHistory();
  }
	render(){
		return(
			<div>
				<div className="seach_title">
					<div>
							<select value={this.state.value} onChange={this.handleChange}>
		            <option value="1">产品</option>
		            <option value="2">公司</option>
		          </select>
		          <span className="glyphicon glyphicon-down"></span>
              <form onSubmit={()=>{this.setHistoryItems(this.state.val);this.enterInto()}} action="#" className="searchInto">
		            <input type="text" placeholder={this.state.content} onChange={this.handleChangen} value={this.state.val} name="val" required="required"/>
              </form>
		          <Link to={
		          	{
                  pathname: this.state.src,
                  state:{
                    val:this.state.val,
                    value:this.state.value
                  }
                }
             	} onClick={this.setHistoryItems.bind(this,this.state.val)}><span className="glyphicon glyphicon-search "></span></Link>
						
					</div>
					<Link to='/' style={{fontSize:'1rem'}} className="search_back">取消</Link>
				</div>
				<div className="like search_ys">
					<div>
						<p>猜你喜欢</p>
						<p onClick={this.changeLike.bind(this,2)}><span className="glyphicon glyphicon-refresh"></span>换一批</p>
						<ul className="like_list">
						  {this.state.likeList.map((item, index) => {
	              return (
                  <Link to={
                    {
                      pathname: this.state.src,
                      state:{
                        val:item.search_keyword,
                        value:1
                      }
                    }
                  } key={index} onClick={this.setHistoryItems.bind(this,item.search_keyword)}>
  	                <li>
  	                 {item.search_keyword}
  	                </li>
                  </Link>
	              )
	            })}
						</ul>
					</div>
				</div>
				<div className="history search_ys">
					<div className={this.state.historyList.length === 0 && 'card_hide'}>
						<p>搜索历史</p>
						<p onClick={this.clearHistory.bind(this)}><span className="glyphicon glyphicon-delete"></span>清除历史</p>
            <ul className="like_list">
              {
                this.state.historyList.length === 0 ? '' :
                this.state.historyList.map((item, index) => {
                return (
                  <Link to={
                    {
                      pathname: this.state.src,
                      state:{
                        val:item,
                        value:1
                      }
                    }
                  } key={index}>
                    <li>
                     {item}
                    </li>
                  </Link>
                )
              })}
            </ul>
					</div>
					<div className={`wu ${this.state.historyList.length !== 0 && 'card_hide'}`}>
						<p><span className="glyphicon glyphicon-search"></span>暂无搜索记录</p>
					</div>
				</div>
			</div>
		)
	}
}